<template>
	<view class="page-photo-print-preview">
		<view class="photo-list">

			<view @tap="onChooseImage" :style="{height: itemHeight}" class="add-btn flex-column-center-gap-8">
				<u-icon name="plus" color="rgba(229, 229, 229, 1)" bold size="21"></u-icon>
				<text class="desc-14">已添加{{photoList.length}}/{{limitLen}}张</text>
			</view>
			<view class="photo-list-item" v-for="item in photoList" :key="item">
				<image class="image" :style="{height: itemHeight}" :src="item" mode="widthFix"></image>	
				<view class="del-icon">
					<u-icon @click="onDelItem(item)"  name="/static/other/cancel.svg" size="24"></u-icon>
				</view>
			</view>

		</view>
		<view class="fixed-bottom-btn back-gray">
			<view class="custom-button full-button" @tap="onSubmit">
				<u-button type="primary" shape="circle" text="提交订单"></u-button>
			</view>
		</view>

	</view>


</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		uploadFile
	} from "@/common/js/method";
	const photoList = ref([]);
	const itemHeight = ref('');
	const tempData = ref({});
	const isSubmit = ref(false);
	const limitLen = computed(() => {
		if (!tempData.value.count) return 0;
		return tempData.value.count.id;
	});
	// 上传图片
	const uploadImages = async () => {

		// 先上传所有图片
		const promises = photoList.value.map(item => uploadFile(item));

		return Promise.all(promises);
	};

	const onDelItem = (imageSrc) => {
		photoList.value = photoList.value.filter(item => item !== imageSrc);
	}

	// 提交订单
	const onSubmit = async () => {
		if (photoList.value.length !== limitLen.value) {
			uni.$u.toast('所选图像数量和冲印数量不符，请重新选择');
			return;
		}
		if (isSubmit.value) return;
		isSubmit.value = true;
		try {
			let onlineImages = await uploadImages();
			console.log('onlineImages', onlineImages)
			uni.hideLoading();
			// 先上传所有图片
			const data = {
				size: tempData.value.size,
				count: tempData.value.count,
				meterial: tempData.value.meterial,
				express: tempData.value.express,
				images: onlineImages,
			};

			uni.navigateTo({
				url: `/pages/photo-print/photo-print-confirm?data=${JSON.stringify(data)}`
			});
		} finally {
			isSubmit.value = false;
		}
	}

	const onChooseImage = () => {
		uni.chooseImage({
			count: 20, //默认9
			sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
			// sourceType: ['album'], //从相册选择
			success: function(res) {
				console.log('temFilePaths', res.tempFilePaths)
				photoList.value = [...photoList.value, ...res.tempFilePaths]
			}
		});

	};

	const setItemHeight = () => {
		// 宽度固定为166.5px, 高度根据选择的尺寸等比缩放
		const [originWidth, originHeight] = tempData.value.size.value.split('x');
		itemHeight.value = (originHeight / originWidth) * 166.5 * 2 + 'rpx'
	}


	onLoad((params) => {
		console.log('paramas', params.data)
		console.log('data', JSON.parse(params.data))
		if (!params.data) return;
		const data = JSON.parse(params.data);
		tempData.value = data;
		photoList.value = data.temFilePaths;
		setItemHeight();
	})
</script>

<style lang="scss" scoped>
	.page-photo-print-preview {
		padding: 20rpx 32rpx 280rpx 32rpx;
		min-height: 100vh;
		background: rgba(245, 245, 245, 1);

		.photo-list {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;

			.photo-list-item {
				line-height: 0;
				margin-top: 20rpx;
				box-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.02);
				border-radius: 16rpx;
				background: rgba(255, 255, 255, 1);
				position: relative;

				.image {
					border-radius: 8px;
					width: 333rpx;
					// height: 229px;
				}

				.del-icon {
					position: absolute;
					right: 8rpx;
					top: 8rpx;
				}
			}

			.add-btn {
				width: 333rpx;
				margin-top: 20rpx;
				border-radius: 16rpx;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.02);
			}
		}

	}
</style>